<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>1纯css实现方向感知按钮</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		.container {
			width: 100%;
			height: 100vh;
			background-color: #333;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.button {
			display: inline-block;
			padding: 0 20px;
			width: 200px;
			height: 80px;
			border-radius: 40px;
			border: none;
			background-color:#37a9c8 ;
			color: #fff;
			font-size: 18px;
			font-weight: bold;
			letter-spacing:2px;
			position: relative;
			overflow: hidden;
			isolation: isolate;
		}
		
		.button:before {
			position: absolute;
			content: '';
			width: 10%;
			aspect-ratio: 1;
			border-radius: 50%;
			margin: auto;
			inset: 0;
			transition: transform 0.5s;
			opacity: 0;
			z-index: -1;
		}
		
		.button:active::before {
			background-color: #2c97da;
			transform: scale(15);
			opacity: 1;
		}
		
		.button .left-span, .button .right-span {
			position: absolute;
			top: 0;
			width: calc(100% / 3);
			height: 100%;
			z-index: -1;
		}
		
		.left-span {
			left: 0;
		}
		
		.right-span {
			right: 0;
		}
		
		.button:has(.left-span:active):before {
			background-color: #6fceab;
			margin-left: 0;
			transform: scale(20);
			transition: transform 0.4s;
		}
		.button:has(.right-span:active):before {
			background-color: #6fceab;
			margin-right: 0;
			transform: scale(20);
			transition: transform 0.4s;
		}
	</style>
</head>
<body>
<div class="container">
	<button class="button">
		<span class="left-span"></span>
		BUTTON
		<span class="right-span"></span>
	</button>
</div>
</body>
</html>